<!-- src/views/index.vue -->
<template>
  <div class="app-container">
    <el-tabs class="esc" type="card" v-model="activeName">
      <el-tab-pane label="新增历程" name="first">
        <el-container class="lcmes">
          <el-main>
            <el-card class="box-card">
              <div slot="header" class="clearfix headBox">
                <div class="headTit">
                  <h1>编辑标题</h1>
                  <input v-model="input" placeholder="请输入新闻标题" />
                </div>
                <div class="headRit">
                  <div class="stateB">
                    <h2>状态</h2>
                    <div class="btnRoup">
                      <el-radio v-model="radio" label="0">启用</el-radio>
                      <el-radio v-model="radio" label="1">禁用</el-radio>
                    </div>
                  </div>
                  <div class="timeB">
                    <h2>时间</h2>
                    <div class="block">
                      <el-date-picker v-model="value1" value-format="yyyy-MM-dd" type="date" format="yyyy-MM-dd"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </div>
                  </div>
                  <div class="orderB">
                    <h2>排序</h2>
                    <button>请选择序号</button>
                  </div>
                  <div class="toPic">
                    <h2>上传图片</h2>
                    <el-upload width="140px" height="140px" class="avatar-uploader"
                      action="http://123.56.105.243:8080/upload" :show-file-list="false"
                      :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrls" :src="imageUrls" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                </div>
              </div>
              <div class="contBox">
                <h1>编辑内容</h1>
                <el-input type="textarea" :rows="7" placeholder="请输入历程内容" v-model="textarea">
                </el-input>
                <el-row>
                  <el-button plain class="yl">预览</el-button>
                  <el-button plain class="sm" @click="handleSubmit">提交</el-button>
                </el-row>
              </div>
            </el-card>
          </el-main>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="历程信息" name="second">
        <el-container class="xzlc">
          <el-main>
            <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
              <el-table-column label="序号" width="200">
                <template slot-scope="scope">
                  <span class="circle">{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="image" label="图片" width="200">
                <template slot-scope="scope">
                  <img class="gmi" :src="scope.row.src" alt="" />
                </template>
              </el-table-column>
              <el-table-column prop="history" width="220" label="年限">
                <template slot-scope="scope">
                  <div>
                    <p>{{ scope.row.history }}</p>
                    <p :class="{
                      greee: scope.row.status == '0',
                      rrren: scope.row.status == '1',
                    }">
                      <span :class="{
                        gren: scope.row.status == '0',
                        rren: scope.row.status == '1',
                      }"></span>08:36
                    </p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="describe" width="270" label="文字内容">
              </el-table-column>
              <el-table-column prop="title" width="220" label="公司介绍">
              </el-table-column>
              <el-table-column label="选择" width="50">
                <template slot-scope="scope">
                  <el-checkbox v-model="selectedIds" :label="scope.row.id"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="320">
                <template slot-scope="scope">
                  <el-button class="btnC">置顶</el-button>
                  <el-button class="btnC" type="success" @click="handleEdit(scope.row)">编辑</el-button>

                  <el-button class="btnC" type="danger" @click="open(scope.row)">删除</el-button>
                  <el-dialog title="编辑历程" :modal="true" :modal-append-to-body="false" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                      <el-form-item label="公司介绍" :label-width="formLabelWidth">
                        <el-input v-model="form.title" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="文字内容" :label-width="formLabelWidth">
                        <el-input v-model="form.describe" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button class="btnC" type="primary" @click="dialogFormVisible = false">取消</el-button>
                      <el-button type="primary" class="btnC" @click="handleUpdate(form)">确定</el-button>
                    </div>
                  </el-dialog>
                </template>
              </el-table-column>
            </el-table>
            <el-row class="rowss">
              <el-button class="dele" type="warning" @click="handleBatchDelete">批量删除</el-button>
            </el-row>
            <el-pagination background layout="prev, pager, next" :total="pagination.total"
              :current-page="pagination.currentPage" :page-size="pagination.pageSize"
              @current-change="handleCurrentChange">
            </el-pagination>
            <!-- <el-pagination
              background
              layout="prev, pager, next"
              :total="1000"
              @current-change="handleCurrentChange"
            >
            </el-pagination> -->
          </el-main>
        </el-container>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  handleSu,
  paginat,
  updated,
  deleteuser,
  deleteusers,
} from "../../request/api/orderlist";
export default {
  data() {
    return {
      imageUrls: "",
      form: {
        title: "",
        describe: "",
        history: "",
        status: "",
      },
      selectedIds: [],
      multipleSelection: [],
      formLabelWidth: "120px",
      dialogFormVisible: false,
      input: "",
      name: "Index",
      radio: 1,
      imageUrl: "",
      textarea: "",
      activeName: "first",
      tsData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      tableData: [],
      courseList: [
        {
          describe: "",
          history: "",
          id: 0,
          pictureId: 0,
          status: 0,
          title: "",
        },
      ],
      imageId: 0,
    };
  },
  methods: {
    // 批量删除
    async handleBatchDelete() {
      if (this.selectedIds.length === 0) {
        this.$message.warning("请先选择需要批量删除的数据");
        return;
      }
      this.$confirm("此操作将永久删除选中文件，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            let res = await this.axios({
              url: `http://123.56.105.243:8080/admin/process/batch`,
              method: "delete",
              data: { ids: this.selectedIds },
            });
            this.$message.success("删除成功！");
            this.paginat();
            this.selectedIds = []; // 清空选中的项
          } catch (error) {
            console.error("批量删除数据失败：", error);
            this.$message.error("删除失败，请重试");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 批量删除
    // async handleBatchDelete() {
    //   if (this.multipleSelection.length === 0) {
    //     this.$message.warning("请先选择需要批量删除的数据");
    //     return;
    //   }
    //   this.$confirm("此操作将永久删除选中文件，是否继续？", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(async () => {
    //       try {
    //         const ids = this.multipleSelection.map((item) => item.id);
    //         let res = await this.axios({
    //           url: `http://123.56.105.243:8080/admin/process/batch`,
    //           method: "delete",
    //           data: { ids },
    //         });
    //         // await ("/admin/process/batch", { ids });
    //         this.$message.success("删除成功！");
    //         this.paginat();
    //       } catch (error) {
    //         console.error("批量删除数据失败：", handleSelectionChange);
    //         this.$message.error("删除失败，请重试");
    //       }
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    //   console.log(this.multipleSelection);
    // },
    handleEdit(row) {
      this.form = { ...row };
      this.dialogFormVisible = true;
    },
    // 历程删除
    open(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handleDelete(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 历程删除接口
    async handleDelete(row) {
      try {
        await deleteuser(`/admin/process/${row.id}`);
        this.$message.success("删除成功！");
        this.paginat();
      } catch (error) {
        console.error("删除数据失败：", error);
        this.$message.error("删除失败，请重试！");
      }
    },
    // 历程修改
    // 历程修改接口
    async handleUpdate(row) {
      try {
        const payload = {
          describe: row.describe,
          id: row.id,
          pictureId: row.pictureId,
          status: row.status,
          title: row.title,
        };
        console.log("更新数据：", payload);
        await updated("/admin/process", payload);
        this.$message.success("更新成功！");
        this.dialogFormVisible = false;
        this.paginat();
      } catch (error) {
        console.error("更新数据失败：", error);
        this.$message.error("更新失败，请重试！");
      }
    },
    // 历程添加接口
    async handleSubmit() {
      try {
        const payload = {
          describe: this.textarea,
          history: this.value1,
          id: this.tableData.length + 1,
          pictureId: this.imageId,
          status: parseInt(this.radio),
          title: this.input,
        };
        console.log("12312312", payload);

        await handleSu("/admin/process", payload);
        this.$message.success("添加成功！");
        this.paginat();
        this.resetForm();
      } catch (error) {
        console.error("添加数据失败：", error);
        this.$message.error("添加失败，请重试！");
      }
    },
    resetForm() {
      this.input = "";
      this.radio = "1";
      this.imageUrl = "../../assets/logo.png";
      this.textarea = "";
    },
    // 分页接口
    async paginat() {
      try {
        const res = await paginat("/admin/process/page", {
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
        });
        this.tableData = res.data.rows;
        this.pagination.total = res.data.total;
      } catch (error) {
        console.error("获取数据失败：", error);
      }
    },

    handleCurrentChange(newPage) {
      this.pagination.currentPage = newPage;
      this.paginat();
    },
    handleAvatarSuccess(res, file) {
      console.log(res.data[0].id, file);
      this.imageId = res.data[0].id;
      this.imageUrls = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      1;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      } else {
        this.$message.success("图片上传成功！");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  created() {
    this.paginat();
  },
};
</script>

<style lang="scss" scoped>
:deep .el-main[data-v-7eb2bc79] {
  padding-top: 0 !important;
  line-height: 0 !important;
}

.rowss {
  padding-left: 10px;

  .dele {
    width: 70px;
    height: 30px;
  }
}

* {
  padding: 0;
  margin: 0;
}

.el-dialog__body {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.rrren {
  height: 25px;
  line-height: 25px;
  color: red;
}

.greee {
  height: 25px;
  line-height: 25px;
  color: #44d600;
}

.gren {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #44d600;
}

.rren {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 10px;
  background-color: red;
  color: red;
}

:deep .dialog-footer {
  button {
    width: 30px;
    height: 15px;
  }
}

.circle {
  display: inline-block;
  width: 35px;
  color: #000;
  height: 35px;
  border-radius: 50%;
  background-color: #eff1f8;
  text-align: center;
  line-height: 35px;
}

.btnC {
  width: 50px !important;
  height: 25px !important;
}

:deep .el-date-editor {
  width: 192px !important;

  .el-input__inner {
    background-color: #f6f8fb;
  }
}

.app-container {
  height: 100vh;
  /* 使容器高度占满整个视口 */

  .lcmes {
    height: 100%;
    display: block;

    .headBox {
      display: flex;
      justify-content: space-between;

      // height: 160px;
      // line-height: 60px;
      .headTit {
        width: 40%;
        text-align: left;

        h1 {
          height: 40px;
          font-size: 18px;
          color: #2c3d5c;
          margin: 0 0 20px 0;
        }

        input {
          width: 450px;
          outline: none;
          border: 1px solid #eceef5;
          background-color: #f6f8fb;
          padding-left: 10px;
          height: 50px;
        }
      }

      :deep input[aria-hidden="true"] {
        display: none !important;
      }

      .headRit {
        width: 60%;
        display: flex;
        justify-content: start;

        .stateB {
          width: 18%;
          margin-right: 40px;
          text-align: left;

          .btnRoup {
            display: flex;
            justify-content: space-between;
          }

          h2 {
            height: 35px;
            font-size: 14px;
            margin-top: 0;
            margin-bottom: 43px;
            font-weight: normal;
          }

          .el-radio {
            margin-right: 0;
          }
        }

        .timeB {
          width: 11%;
          margin-right: 110px;
          text-align: left;

          h2 {
            height: 23px;
            font-size: 14px;
            margin-top: 0;
            margin-bottom: 40px;
            font-weight: normal;
          }

          button {
            background-color: #f6f8fb;
            width: 100%;
            border: 1px solid #eceef5;
            height: 30px;
            line-height: 30px;
            color: #2c3d5c;
          }
        }

        .orderB {
          width: 11%;
          margin-right: 50px;
          text-align: left;

          h2 {
            height: 23px;
            font-size: 14px;
            margin-top: 0;
            margin-bottom: 40px;
            font-weight: normal;
          }

          button {
            background-color: #f6f8fb;
            width: 100%;
            border: 1px solid #eceef5;
            height: 40px;
            line-height: 30px;
            color: #b5b7ba;
          }
        }

        .toPic {
          width: 20%;
          text-align: left;

          h2 {
            height: 35px;
            font-size: 14px;
            margin-top: 0;
            margin-bottom: 20px;
            font-weight: normal;
          }

          .avatar-uploader {
            width: 140px !important;
            height: 60px;

            :deep .el-upload {
              width: 120px !important;
              height: 60px;
              border: 1px dashed #8c939d;
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              overflow: hidden;

              .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 120px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: #f6f8fb;
              }
            }
          }

          .avatar-uploader .el-upload:hover {
            border-color: #409eff;
          }

          .avatar {
            // line-height: 160px;
            width: 120px;
            height: 80px;
            display: block;
          }
        }
      }
    }

    .contBox {
      width: 100%;
      height: 100%;
      text-align: left;

      h1 {
        font-size: 18px;
        color: #2c3d5c;
        margin: 0 0 20px 0;
      }

      .el-textarea {
        margin-bottom: 80px;
      }

      .el-row {
        margin-bottom: 300px;
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }
  }

  .xzlc {
    display: block;
    height: 100%;
    background: #f6f8fb;

    .el-main {
      padding-top: 0 !important;

      .el-table__header {
        border-top: 1px solid #ebeef5;
      }

      .gmi {
        width: 50px;
        height: 50px;
      }
    }
  }
}

:deep .el-tabs__item {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: #fff;
  margin-right: 20px;
}

:deep .el-tabs__item.is-active {
  background-color: #2567ff;
  color: #fff;
}

> :deep .el-tabs__header {
  margin: 0 !important;
  // padding-left: 20px;
  box-sizing: border-box;
  width: 1670px;
  // height: 60px;
  margin-left: 20px;
  border-bottom: 0 !important;
}

:deep .el-textarea__inner {
  background-color: #f6f8fb;
}

.yl {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-right: 25px;
}

.sm {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #2567ff;
}
</style>
